<template>
  <div class="about">
<!--    <div id="topt">-->
<!--      <div class="top">-->
<!--        <img src="../assets/img/sqimg/fanhui.png" alt="" @click="back">-->
<!--        <div class="title-img">申请信息</div>-->
<!--      </div>-->
<!--    </div>-->
    <NavBarTop pageTit="申请信息" :needPhoneTop="false"></NavBarTop>
    <div id="banner">
      <!-- 申请人类型 -->
<van-field
  v-model="fieldValue"
  is-link
  readonly
  label="申请人类型"
  required
  placeholder="请选择申请人类型"
  input-align="right"
  @click="show = true"
/>
<van-popup v-model="show" name="show" round position="bottom">
  <van-cascader
    v-model="cascaderValue"
    title="请选择申请人类型"
    :options="options"
    @close="show = false"
    input-align="right"
    @finish="onFinish"
  />
</van-popup>
<!-- 保障方式 -->
<van-cell-group>
<van-field
  v-model="bzvalue"
  is-link
  readonly
  label="保障方式"
  required
  placeholder="请选择保障方式"
  input-align="right"
  @click="showbz = true"
/>
<van-popup v-model="showbz" name="showbz" round position="bottom">
  <van-cascader
    v-model="cascaderValuefybz"
    title="请选择保障方式"
    :options="optionsbz"
    @close="showbz = false"
    @finish="onFinishbz"
    input-align="right"
  />
</van-popup>
  <van-cell v-if="bzvalue==='租房补贴'" title="受理部门" value="住房保障科"  />
  <van-cell v-if="bzvalue==='实物配租'" title="受理部门" value="配租保障科"  />
  <!-- <van-cell label="描述信息" value="内容" class="cellxx"/> -->
</van-cell-group>


<!-- <div class="bumen">
  <div>受理部门</div>
  <div>住房保障科</div>
</div> -->


<!-- 申请所在街道 -->
<van-field
  v-model="fieldValuejd"
  is-link
  readonly
  label="申请所在街道"
  required
  placeholder="请选择街道"
  input-align="right"
  @click="showjd = true"
/>
<van-popup v-model="showjd" name="showjd" round position="bottom">
  <van-cascader
    v-model="cascaderValuejd"
    title="请选择街道"
    :options="optionsjd"
    @close="showjd = false"
    input-align="right"
    @finish="onFinishjd"
  />
</van-popup>

<!-- 申请房源 -->
<van-field
  v-model="fieldValuefy"
  is-link
  readonly
  label="申请房源"
  required
  placeholder="请选择房源"
  input-align="right"
  @click="showfy = true"
/>
<van-popup v-model="showfy" name="showfy" round position="bottom">
  <van-cascader
    v-model="cascaderValuefy"
    title="请选择房源"
    :options="optionsfy"
    @close="showfy = false"
    input-align="right"
    @finish="onFinishfy"
  />
</van-popup>
    </div>
    <div id="bottom">
    <p>1.请根据填写要求据实填写，填写有误将影响您的申请进度。</p>
    <p>2.受理部门会根据您所选择的申请所在地联动变化。</p>
    <p>3.您的申请信息将发送至所选择的受理部门进行受理。</p>
  </div>
  <div style="margin: 16px;" class="divbtn">
    <van-button round block type="info" native-type="submit" @click="xyb">下一步</van-button>
  </div>
  </div>
</template>
<script>
import { Button, Cell, CellGroup, Icon, Image as VanImage, NavBar,Form ,Field,Cascader ,Popup  } from "vant";
import  NavBarTop from '@/components/navBar.vue'
export default {
  name: "about",
  components: {
    [Button.name]: Button,
    [Cell.name]: Cell,
    [CellGroup.name]: CellGroup,
    [Icon.name]: Icon,
    [VanImage.name]: VanImage,
    [NavBar.name]: NavBar,
    [Form.name]: Form,
    [Field.name]: Field,
    [Cascader.name]: Cascader,
    [Popup.name]: Popup,
    NavBarTop
  },
  data() {
   return {
     show: false,
      fieldValue: '',
      cascaderValue: '',
      // 选项列表，children 代表子选项，支持多级嵌套
      options: [
        {
          text: '低保',
          value: '330000'
        },
        {
          text: '人才',
          value: '320000'
        }
      ],
      showjd: false,
      fieldValuejd: '',
      cascaderValuejd: '',
      // 选项列表，children 代表子选项，支持多级嵌套
      optionsjd: [
        {
          text: '古荡街道',
          value: '330000'
        },
        {
          text: '文一西路',
          value: '320000'
        },
        {
          text: '文二西路',
          value: '321000'
        },
      ],
      // 房源
      showfy: false,
      fieldValuefy: '',
      cascaderValuefy: '',
      // 选项列表，children 代表子选项，支持多级嵌套
      optionsfy: [
        {
          text: '余杭小区 1-1-1001',
          value: '330000'
        }
      ],
      // 保障
      showbz:false,
      bzvalue:'',
      cascaderValuefybz: '',
      optionsbz:[
        {
          text: '租房补贴',
          value: '330000'
        },
        {
          text: '实物配租',
          value: '320000'
        }

      ]
    };
  },
  methods: {
    onFinish({ selectedOptions }) {
      this.show = false;
      this.fieldValue = selectedOptions.map((option) => option.text).join('/');
    },onFinishbz({ selectedOptions }) {
      this.showbz = false;
      this.bzvalue = selectedOptions.map((option) => option.text).join('/');
      // console.log()

    },
    onFinishjd({ selectedOptions }) {
      this.showjd = false;
      this.fieldValuejd = selectedOptions.map((option) => option.text).join('/');
    },
    onFinishfy({ selectedOptions }) {
      this.showfy = false;
      this.fieldValuefy = selectedOptions.map((option) => option.text).join('/');
    },
    xyb() {
    this.$router.push('/shenq2')
    },
    back(){
        this.$router.go(-1)
    },
  },
};
</script>
<style scoped>

::v-deep .van-field__control--right{
  color: #666666;
}
.van-cell__value--alone{
text-align: right;
  color: gray;
}
.van-cell{
color: gray;
}
 .bumen{
  /* display: flex; */
/* width: 3.56rem; */
width: 100% !important;
height: .20rem;
font-size: .14rem;
font-family: Source Han Sans SC;
font-weight: bold;
line-height: 0px;
color: #2D2D2D;
opacity: 0.4;
}

.divbtn{
  width: 3.45rem;
  position: absolute;
  bottom: 10px;
}
#bottom{
  border-top: .06rem solid #F2F3F5;
  margin-top: .1rem;
}
#bottom p{
  /* width: 2.86rem; */
height: .18rem;
font-size: .12rem;
font-family: Source Han Sans SC;
font-weight: 4rem;
line-height: 0px;
color: #2D2D2D;
opacity: 1;
padding-left: .1rem;
}

#topt{
  background: url('../assets/img/sqimg/xhg.png') no-repeat;

}
.top img{
  width: .08rem;
  height: .14rem;
padding-left: 20px;
  /* float: left; */
}
.title-img{
  /* height: 25px; */
font-size: .17rem;
font-family: Source Han Sans SC;
font-weight: bold;
line-height: 0px;
display: inline;
padding-left: 100px;
color: #2D2D2D;
opacity: 1;
}
.van-field__control{
  text-align: right !important;
}
/* h1 {
  font-size: 0.3rem;
} */
</style>
